<div class="page-content about-page">
  <!-- 状态栏 -->
  <div class="status-bar">
    <div class="time">09:41</div>
    <div class="battery-wifi">
      <i data-feather="wifi" style="width: 16px; height: 16px;"></i>
      <i data-feather="battery" style="width: 16px; height: 16px;"></i>
    </div>
  </div>

  <!-- 页面头部 -->
  <header class="page-header">
    <h1>关于我们</h1>
    <p>了解我们的故事与使命</p>
  </header>

  <!-- 页面主体 -->
  <div class="page-body">
    <!-- 公司Logo和介绍 -->
    <div class="company-intro u-text-center u-mb-xl">
      <div class="company-logo u-mb-lg">
        <div class="c-avatar c-avatar--lg" style="margin: 0 auto; background: linear-gradient(135deg, #007AFF, #5AC8FA);">
          <i data-feather="zap" style="width: 32px; height: 32px; color: white;"></i>
        </div>
      </div>
      <h2 style="margin: 0 0 var(--spacing-sm); font-size: var(--font-size-xl); color: var(--color-gray-900);">
        创新科技有限公司
      </h2>
      <p style="color: var(--color-gray-600); line-height: 1.6;">
        我们致力于为用户提供最优质的产品体验，通过不断创新的技术和设计，让科技更好地服务于生活。
      </p>
    </div>

    <!-- 公司信息卡片 -->
    <div class="c-card u-mb-lg">
      <div class="c-card__header">
        <h3 class="c-card__title">
          <i data-feather="info" style="width: 20px; height: 20px; margin-right: var(--spacing-sm);"></i>
          公司信息
        </h3>
      </div>
      <div class="c-card__body">
        <div class="c-list">
          <div class="c-list-item">
            <div class="c-list-item__icon">
              <i data-feather="calendar" style="width: 20px; height: 20px;"></i>
            </div>
            <div class="c-list-item__content">
              <div class="c-list-item__title">成立时间</div>
              <div class="c-list-item__subtitle">2020年6月</div>
            </div>
          </div>
          
          <div class="c-list-item">
            <div class="c-list-item__icon">
              <i data-feather="map-pin" style="width: 20px; height: 20px;"></i>
            </div>
            <div class="c-list-item__content">
              <div class="c-list-item__title">总部地址</div>
              <div class="c-list-item__subtitle">北京市海淀区中关村大街1号</div>
            </div>
          </div>
          
          <div class="c-list-item">
            <div class="c-list-item__icon">
              <i data-feather="users" style="width: 20px; height: 20px;"></i>
            </div>
            <div class="c-list-item__content">
              <div class="c-list-item__title">团队规模</div>
              <div class="c-list-item__subtitle">50-100人</div>
            </div>
          </div>
          
          <div class="c-list-item">
            <div class="c-list-item__icon">
              <i data-feather="target" style="width: 20px; height: 20px;"></i>
            </div>
            <div class="c-list-item__content">
              <div class="c-list-item__title">业务领域</div>
              <div class="c-list-item__subtitle">移动应用开发、企业数字化解决方案</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 核心价值观 -->
    <div class="c-card u-mb-lg">
      <div class="c-card__header">
        <h3 class="c-card__title">
          <i data-feather="heart" style="width: 20px; height: 20px; margin-right: var(--spacing-sm);"></i>
          核心价值观
        </h3>
      </div>
      <div class="c-card__body">
        <div class="values-grid">
          <div class="value-item">
            <div class="value-icon">
              <i data-feather="lightbulb" style="width: 24px; height: 24px;"></i>
            </div>
            <h4>创新</h4>
            <p>持续探索新技术，创造更好的解决方案</p>
          </div>
          
          <div class="value-item">
            <div class="value-icon">
              <i data-feather="award" style="width: 24px; height: 24px;"></i>
            </div>
            <h4>品质</h4>
            <p>严格把控产品质量，追求极致的用户体验</p>
          </div>
          
          <div class="value-item">
            <div class="value-icon">
              <i data-feather="users" style="width: 24px; height: 24px;"></i>
            </div>
            <h4>合作</h4>
            <p>团队协作，共同成长，实现共赢</p>
          </div>
          
          <div class="value-item">
            <div class="value-icon">
              <i data-feather="trending-up" style="width: 24px; height: 24px;"></i>
            </div>
            <h4>成长</h4>
            <p>不断学习进步，拥抱变化和挑战</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="c-card">
      <div class="c-card__header">
        <h3 class="c-card__title">
          <i data-feather="phone" style="width: 20px; height: 20px; margin-right: var(--spacing-sm);"></i>
          联系我们
        </h3>
      </div>
      <div class="c-card__body">
        <div class="contact-grid">
          <button class="contact-item" data-contact="email">
            <div class="contact-icon">
              <i data-feather="mail" style="width: 24px; height: 24px;"></i>
            </div>
            <div class="contact-info">
              <h4>邮箱</h4>
              <p>contact@example.com</p>
            </div>
            <div class="contact-action">
              <i data-feather="copy" style="width: 16px; height: 16px;"></i>
            </div>
          </button>
          
          <button class="contact-item" data-contact="phone">
            <div class="contact-icon">
              <i data-feather="phone" style="width: 24px; height: 24px;"></i>
            </div>
            <div class="contact-info">
              <h4>电话</h4>
              <p>+86 138 0013 8000</p>
            </div>
            <div class="contact-action">
              <i data-feather="copy" style="width: 16px; height: 16px;"></i>
            </div>
          </button>
          
          <button class="contact-item" data-contact="website">
            <div class="contact-icon">
              <i data-feather="globe" style="width: 24px; height: 24px;"></i>
            </div>
            <div class="contact-info">
              <h4>官网</h4>
              <p>www.example.com</p>
            </div>
            <div class="contact-action">
              <i data-feather="external-link" style="width: 16px; height: 16px;"></i>
            </div>
          </button>
        </div>
      </div>
    </div>

    <!-- 版本信息 -->
    <div class="version-info u-text-center u-mt-xl">
      <div class="c-badge c-badge--primary u-mb-sm">v1.0.0</div>
      <p style="color: var(--color-gray-500); font-size: var(--font-size-sm);">
        © 2024 创新科技有限公司. 保留所有权利.
      </p>
    </div>
  </div>
</div>

<style>
/* 关于我们页面特定样式 */
.about-page {
  background: var(--color-gray-50);
}

.company-intro {
  padding: var(--spacing-lg) 0;
}

.company-logo {
  position: relative;
}

/* 价值观网格 */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.value-item {
  text-align: center;
  padding: var(--spacing-md);
}

.value-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 122, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
  color: var(--color-primary);
}

.value-item h4 {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
}

.value-item p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.4;
}

/* 联系方式网格 */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.contact-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.contact-item:hover {
  background: white;
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
}

.contact-icon {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-info {
  flex: 1;
  text-align: left;
}

.contact-info h4 {
  margin: 0 0 2px;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
}

.contact-info p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.contact-action {
  color: var(--color-gray-400);
  transition: color 0.2s ease;
}

.contact-item:hover .contact-action {
  color: var(--color-primary);
}

/* 版本信息 */
.version-info {
  padding-bottom: var(--spacing-xl);
}

/* 响应式调整 */
@media (max-width: 375px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .value-item {
    padding: var(--spacing-sm);
  }
  
  .contact-item {
    padding: var(--spacing-sm);
  }
  
  .contact-icon {
    width: 40px;
    height: 40px;
    margin-right: var(--spacing-sm);
  }
}
</style> 